<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 400px;
      height: 400px;
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div id="box1" class="box"></div>
  <img src="./img.png" alt="" id="img1">
  <div id="msg"></div>
  <script>
    // 拖拽事件
    // ondragenter & ondrop
    // ondragstart 拖动开始
    // setData(type, value) 设置数据类型和值
    // getData(type) 获取数据
    // ondragover 阻止默认事件
    window.onload = function () {
      var boxDiv = document.getElementById('box1');
      var msgDiv = document.getElementById('msg');
      var img1 = document.getElementById('img1');

      // boxDiv.ondragenter = function (e) {
      //   showObj(e)
      // }

      // 要使drop起作用，要阻止(ondragover)事件
      boxDiv.ondragover = function (e) {
        e.preventDefault();
      }
      // 拖放事件
      boxDiv.ondrop = function (e) {
        showObj(e.dataTransfer);
        e.preventDefault();

        //
        var img = document.getElementById(e.dataTransfer.getData('imgId'));
        e.target.appendChild(img);
      }
      // 元素拖动
      img1.ondragstart = function (e) {
        e.dataTransfer.setData('imgId', 'img1');
      }

      function showObj(obj) {
        var s = '';
        for (var k in obj) {
          s += k + ':' + obj[k] + '<br/>'
        }
        msgDiv.innerHTML = s;
      }
    }
  </script>
</body>

</html>